<template>
<h2>我的书架</h2>
<div v-for="(Item,index) in booklist">
    <span>{{ Item.bookname }}</span>
    <span>{{ Item.author }}</span>
    <span><button @click="onclick(index)">删除</button></span>
</div>
</template>

<script setup>
    import { ref } from 'vue';
    const booklist=ref([
        {id:1,author:"施耐腌",bookname:"水浒传"},
        {id:2,author:"罗贯中",bookname:"三国志"},
        {id:3,author:"曹雪芹",bookname:"红楼梦"},
        {id:4,author:"吴承恩",bookname:"西游记"},
    ])    
    const onclick=(index)=>
    {
        if(window.confirm("Are you sure"))
        {
            booklist.value.splice(index,1);
        }
    }
</script>

<style scoped>
    h2
    {
        margin-left: 420px;
    }
    div{
        margin: auto auto;
        display: flex;
        justify-content: space-around;
        border: solid green 2px;
        width: 500px;
    }
    span{
        font-size: 30px;
        /* background-color: red; */
        padding-top: 10px;
        height: 50px;
    }
</style>